<template>
    <div class="page">
      <div class="top-div">
        <el-button type="primary" @click="addClassPoup" plain>添加班级</el-button>
      </div>
      <div class="body-div">
        <el-table
          :data="tableData"
          height="550"
          border
          style="width: 100%">
          <el-table-column
            prop="beginDate"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="className"
            label="班级">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-popconfirm
                @confirm="deleteClassClick(scope.row)"
                title="确定删除吗？">
                <el-button slot="reference"
                           type="text" size="small">
                  删除班级
                </el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="创建班级" :visible.sync="classPoup">
        <el-form ref="form" :model="classForm" label-width="120px">
            <el-form-item label="班级名称" >
              <el-input v-model="classForm.className"></el-input>
            </el-form-item>
            <el-form-item label="班级日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期"
                                v-model="classForm.beginDate"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="createClass" >立即创建</el-button>
              <el-button @click="classPoup = false">取消</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>
  import {createClassByPost, getClassListByGet, deleteClassByGet} from '../../config/index';

  // 单纯班级的增删改查
    export default {
      data() {
        return {
          classPoup: false,
          classForm: {
            className: '',
            beginDate: ''
          },
          formLabelWidth: '120px',
          tableData: [{
            beginDate: '2016-05-03',
            className: '测试数据1'
          }]
        }
      },
      methods: {
        deleteClassClick(row) {
          var _this = this;
          console.log("xxx", row)
          // 删除班级
          var res = deleteClassByGet(row.id);
          res.then((res)=>{
            if(res.status == 200){
              // 删除之后, 刷新班级列表
              _this.getClassList()
            }else if (res.status == 10){
              // 该班级下还有分组, 请先删除该班级下的分组: 弹窗提示
              this.$alert('请先删除该班级下的分组', '注意', {
                showConfirmButton: false,
                callback: action => {}
              });
            }else {
              // 该班级下还有分组, 请先删除该班级下的分组: 弹窗提示
              this.$alert(res.errorMsg, '注意', {
                showConfirmButton: false,
                callback: action => {}
              });
            }
          }).catch((e)=>{
            console.log("deleteClassByGet: 失败",e);
          })
        },
        addClassPoup(){
          this.classPoup = true
        },
        createClass(){
          var _this = this;

          console.log(this.classForm.beginDate)
          var dateY = this.classForm.beginDate.getFullYear()
                    + "-" + (this.classForm.beginDate.getMonth()+1)
                    + "-" + this.classForm.beginDate.getDate()

          // 创建班级
          var res = createClassByPost({
            "className": this.classForm.className,
            "beginDate": dateY
          });
          res.then((res)=>{
            if(res.status == 200){
              // 创建成功, 刷新班级列表, 关闭弹窗
              _this.classPoup = false
              _this.getClassList()
            }
          }).catch((e)=>{
              console.log("createClassByPost: 失败",e);
            })
        },
        getClassList(){
          var _this = this;
          // 获取班级列表
          var res = getClassListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 把新班级列表, 赋值给 tableData
              _this.tableData = res.data;
            }
          }).catch((e)=>{
            console.log("getClassList: 失败",e);
          })
        }
      },
      mounted() {
        this.getClassList()
      }
    }
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
}
  .top-div{
    height: 50px;
    padding: 30px 30px 10px;
  }
  .body-div{
    padding: 0 30px;
  }
</style>
